<template>
	<div class="kp-rpb">
		<div class="kp-canvas">
			<canvas id="canvas" ref="canvas" width="750" height="180"></canvas>
			<!--<canvas id="my_canvas" width="540" heihgt="180"></canvas>-->
			<!--图例  -->
			<div class='explin'>
				<!--可用红包  -->
				<div class='flex part'>
					<!--小方块  -->
					<div class='un'></div>
					<div>可用红包（元）：{{unfrozen}}</div>
				</div>
				<!--冻结中  -->
				<div class='flex part'>
					<!--小方块  -->
					<div class='ed'></div>
					<div>冻结中未入账（元）：{{frozen}}</div>
				</div>
			</div>
		</div>
		<div class='flex flex_div'>
			<div>
				<img class='img' src='http://h5.kpcx179.com/wximages/wallet/tishi-@2x.png'></img>
			</div>
			<div class='mosttxt'>
				<div>
					<span class='light'>可用红包：</span>
					<span> 推广红包，返现非冻结红包等；</span>
				</div>
				<div>
					<span class='light'>冻结中未入账红包：</span>
					<span> 购买火车票、汽车票后，返现红包在发车时间后的24小时内为冻结状态；预定酒店后的离店日期前为冻结状态</span>
				</div>
				<div>
					<span class='light'>温馨提示 ：</span>
					<div class="light_div"> 1.严禁倒票刷票，一经发现将冻结所有红包金额，冻结账户，并对某些情况采取强制措施。</div>
					<div class="light_div"> 2.您当天返现累计金额达到上限额度30元，订单返现将相应调整变化。</div>
					<div class="light_div"> 3.退票或者改签的订单，下单时返现的红包将被取消。</div>
					<div class="light_div"> 4.红包的可用比例根据不同票种以及下单的金额会有相应的规则变化，具体可用金额以下单页面展示为准。</div>
					<div class="light_div"> 5.火车票线下发生退票行为，返现的红包将被取消。</div>
					<div class="light_div"> 5.退票或者改签的订单，下单时使用的红包不予退回。</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script type="text/javascript">
	import { mapGetters } from "vuex";
	export default {
		data() {
			return {
				all: '',
				frozen: '',
				unfrozen: '',
				userID: '',
				num: 0,
				canvas: '',
				context: '',
				cirX: '',
				cirY: '',
				rad: '',
				n: 1,
				speed: 150,
				r: 72,
				percent: 100,
				ratio:''

			}
		},
		mounted() {
			this.getmsg();
			var getPixelRatio = function (context) {
			    var backingStore = context.backingStorePixelRatio ||
			        context.webkitBackingStorePixelRatio ||
			        context.mozBackingStorePixelRatio ||
			        context.msBackingStorePixelRatio ||
			        context.oBackingStorePixelRatio ||
			        context.backingStorePixelRatio || 1;
			    return (window.devicePixelRatio || 1) / backingStore;
			};
			this.canvas = document.getElementById('canvas');
			this.context = this.canvas.getContext("2d");
			this.ratio = getPixelRatio(this.context);
			this.canvas .style.width = this.canvas.width /75 * 2 + 'rem';
			this.canvas.style.height = this.canvas.height /75 * 2 + 'rem';
			this.canvas.width = this.canvas.width * this.ratio;
			this.canvas.height = this.canvas.height * this.ratio;
			this.context.scale(this.ratio, this.ratio);
			var wid = document.body.clientWidth
			this.cirX = wid/2,
			this.cirY = 90,
			this.rad = Math.PI * 2 / 100
			this.DreamLoading()
//this.drawe();
		},
		created() { //创建后

		},
		watch: { //监听放置

		},
		methods: { //方法放置
			getmsg() {
				let param = {
					"userID": this.userinfo.userID
				};
				let that = this;
				this.$http.post(this.$baseUrl.baseurl + "kpcx/appMyWallet/myRedBagHome", param).then((res) => {
					this.all = res.data.Result.redEnvelopeTotalMoney;
					this.frozen = res.data.Result.frozenMoney;
					this.unfrozen = res.data.Result.unfrozenMoney;

				}).catch((err) => {

				})
			},
			//绘制文本
			writeText(n) {
				this.context.save();
				this.context.font = "11px Calibri";
				this.context.fillStyle = "#333"; //字体颜色
				this.context.fillText("红包总资产（元）", (this.cirX-40), (this.cirY + 10)); //绘制实心
				this.context.strokeStyle = "#444444";
				this.context.strokeText(this.all + '', this.cirX, this.cirY-10); //绘制空心
				this.context.stroke();
				this.context.restore();
			},
			//绘制蓝色外圈
			writeBlue(n) {
				this.context.save();
				this.context.strokeStyle = "#b7b7b7";
				this.context.lineWidth = 14;
				this.context.lineCap = 'round';
				this.context.beginPath();
				this.context.arc(this.cirX, this.cirY, this.r, Math.PI / 4, Math.PI / 4 + this.rad * n, false);
				this.context.stroke();
				this.context.restore();
			},
			DreamLoading() {
				//清除所有，重新绘制
				this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)

				this.writeText(this.n);
				this.writeBlue(this.n);
				if(this.n <= this.percent) {
					this.n = this.n + 1;
				} else {
					return this.n = 0;
				}
				requestAnimationFrame(this.DreamLoading);
			},
			drawe(){
				 // 获取像素比
			    var getPixelRatio = function (context) {
			        var backingStore = context.backingStorePixelRatio ||
			            context.webkitBackingStorePixelRatio ||
			            context.mozBackingStorePixelRatio ||
			            context.msBackingStorePixelRatio ||
			            context.oBackingStorePixelRatio ||
			            context.backingStorePixelRatio || 1;
			        return (window.devicePixelRatio || 1) / backingStore;
			    };
			    //画文字
			    var myCanvas = document.getElementById("my_canvas");
			    var context = myCanvas.getContext("2d");
			    var ratio = getPixelRatio(context);
			 
			    myCanvas.style.width = myCanvas.width + 'px';
			    myCanvas.style.height = myCanvas.height + 'px';
			 
			    myCanvas.width = myCanvas.width * ratio;
			    myCanvas.height = myCanvas.height * ratio;
			 
			    // 放大倍数
			    context.scale(ratio, ratio);
			 
			    context.font = "18px Georgia";
			    context.fillStyle = "#999";
			    context.fillText("我是清晰的文字", 50, 50);
			}

		},
		components: {},
		computed: mapGetters([
			'userinfo',
		]),
	}
</script>

<style scoped>
	.kp-canvas {
		margin-top: 110px;
		background: #fff;
		width: 100%;
		overflow: hidden;
		padding-bottom: 20px;
	}
	
	.flex {
		display: flex;
	}
	
	.flex_div {
		background: #F4F5F9;
	}
	
	.head {
		background: #fff;
		padding-bottom: 20px;
	}
	
	.canvas {
		height: 400px
	}
	/*图例  */
	
	.explin {
		margin-top: 36px;
		padding-left: 30px;
		font-size: 26px;
		color: #444444;
	}
	
	.part {
		align-items: center;
		margin-top: 20px;
	}
	/*小方块  */
	
	.un {
		height: 18px;
		width: 18px;
		background: #f39900;
		margin-right: 20px;
		border-radius: 4px;
	}
	
	.ed {
		height: 18px;
		width: 18px;
		background: #009a43;
		margin-right: 20px;
		border-radius: 4px;
	}
	/*文字解释部分  */
	
	.img {
		width: 40px;
		height: 40px;
		margin: 20px 16px 0 20px;
	}
	
	.mosttxt {
		margin-top: 16px;
		line-height: 40px;
		padding-right: 40px;
	}
	
	span {
		font-size: 28px;
		color: #8a8a8a
	}
	
	.light_div {
		font-size: 28px;
		color: #8a8a8a
	}
	
	.light {
		color: #444444
	}
	/*红包明细按钮  */
	
	.ming {
		justify-content: flex-end;
		padding-right: 30px;
		height: 0;
	}
	
	.ming div {
		width: 120px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		color: red;
		position: relative;
		top: -40px;
	}
</style>